<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500" style="background: #000;"></canvas>

    <script>
        window.onload = function() {   // 此时js写在head或body上没有区别，因为这部分会在所有运行完再运行
            let canvas = document.getElementById("canvas"),
                ctx = canvas.getContext("2d"),   //构造一个画布
                    centerX = canvas.width / 2,  //
                    centerY = canvas.height / 2,
                    rad = Math.PI * 2 / 100
                    speed = 0.1
            // 圆环
            function blueCircle(n) {
                ctx.save()
                ctx.strokeStyle = '#fff'
                ctx.lineWidth = 5
                ctx.beginPath();
                ctx.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad)   //画布路径
                ctx.stroke();
                ctx.closePath();  // 结束路径
                ctx.restore()
            }  
            
            
            // 数值
            function text(n) {
                ctx.save()  // 保证接下来的样式只生效于这一段
                ctx.strokeStyle = '#fff'
                ctx.font = '40px Arial'
                ctx.strokeText(n.toFixed(0) + '%', centerX - 25, centerY + 10)
                ctx.restore()  // 与save效果一样
            }

            
            (function draw() {
                requestAnimationFrame(draw)
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                blueCircle(speed)
                text(speed)
                if (speed >= 100) {
                    speed = 100
                }
                speed += 0.1
            }) ()

            // setInterval(() => {       定时器
            //     blueCircle(speed)
            //     speed += 0.1
            // },100)   

        }
    </script>
</body>
</html>